<!-- #V2G功能 -->
<template>
  <view :style="objColor">
    <customer></customer>
    <!-- orderSub/pages/orderDetails/orderDetails.wxml -->
    <!-- <view class="box-detail">
      <capsule
        v-if="!showCustom"
        txtColor="#18181A"
        image="https://oos-cn.ctyunapi.cn/front-end/static/static/back.png"
        title="订单详情"
        :show_bol="false"
      ></capsule>
      <navLod
        v-if="showCustom"
        txtColor="#18181A"
        bgColor="#FFFFFF"
        image="https://oos-cn.ctyunapi.cn/front-end/static/static/back.png"
        title="订单详情"
        :show_bol="false"
      ></navLod>
    </view> -->
    <image
      class="header-image"
      :src="mixOtherIconList[5] && mixOtherIconList[5].icon"
      style="width: 100%"
    ></image>

    <view class="detCon">
      <view class="demarcation">
        <view
          class="detTopCon"
          v-if="
            det.billStatus == 13 || det.billStatus == 12 || det.billStatus == 11
          "
        >
          <view class="detTopName">订单待支付</view>
          <view class="detTopText"
            >感谢使用，请及时支付订单避免影响后续充电！</view
          >
        </view>
        <view class="detTopCon" v-else>
          <view class="detTopName">订单已完成</view>
          <view class="detTopText" v-if="det.disposableOrder"
            >感谢使用，退款会在1～7个工作日内原路退回！！</view
          >
          <view class="detTopText" v-else>感谢使用，期待再次充电！</view>
        </view>
        <view
          class="orderInfoCon"
          :style="
            'padding-bottom: ' + (orderStatus == 2 ? '150rpx' : '150rpx') + ';'
          "
        >
          <view class="demCon infoCon">
            <view class="demCenter">
              <!-- 微信支付分显示待支付金额 -->
              <template v-if="det.billStatus == 11 && det.wxppOrder">
                <view class="demNum">
                  <text class="symbol">￥</text>
                  {{ (det.arrears / 100).toFixed(2) }}
                  <!-- {{orderStatus == 2 ? det.arrears : det.actualBalance}} -->
                </view>
                <view class="demTitle">待支付金额</view>
              </template>
              <template v-else>
                <view class="demNum">
                  <text class="symbol">￥</text>
                  {{ det.actualBalanceCalculate || "" }}
                </view>
                <view class="demTitle">实付金额</view>
              </template>

              <!-- <view class="demState">
                订单状态：
                <text
                  :style="
                    'color: ' +
                    (det.billTypeStr == '进行中'
                      ? '#606266'
                      : det.billTypeStr == '待支付'
                      ? '#FC724C'
                      : '#78C744') +
                    ';'
                  "
                >
                  {{ det.billTypeStr }}
                </text>
                <image
                  :src="
                    'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/' +
                    (det.billTypeStr == '进行中'
                      ? 'close'
                      : det.billTypeStr == '待支付'
                      ? 'pay'
                      : 'finish') +
                    '.png'
                  "
                />
              </view> -->
            </view>

            <view class="demMoneyCon">
              <view class="demMoneyList" v-if="det.totalDiscountBalance > 0">
                <view class="demMoneyTitle"> 优惠金额 </view>
                <view class="totalCon">
                  <text class="demMoneyVal">
                    -￥
                    <text class="tc">{{ det.totalDiscountBalance }}</text>
                  </text>
                </view>
              </view>
              <view class="demMoneyList" v-if="det.deductibleBalance > 0">
                <view class="demMoneyTitle"> 奖励金抵扣 </view>
                <view class="totalCon">
                  <text class="demMoneyVal">
                    -￥
                    <text class="tc">{{ det.deductibleBalance }}</text>
                  </text>
                </view>
              </view>
              <view class="demMoneyList">
                <!-- <view class="demMoneyTitle">订单总金额</view> -->

                <!-- 831订单总金额 加入专享价图标 -->
                <view class="demMoneyTitle price_view">
                  <view class="text_view">
                    <text>订单总金额</text>
                  </view>
                  <view class="img_view" v-if="det.exclusiveBill">
                    <image
                      class="v_icon"
                      src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/small/zxcdj.png"
                      mode="scaleToFill"
                    />
                  </view>
                </view>

                <view class="totalCon">
                  <view class="demMoneyVal">
                    ￥
                    <text class="tc">{{ det.busBalance }}</text>
                  </view>
                  <view class="totalDetailed"
                    >电费:¥{{ det.powerBalance }} | 服务费:¥{{
                      det.serviceBalance
                    }}</view
                  >
                </view>
              </view>

              <!-- <van-collapse :value="activeNames" @change="onChange">
                                <van-collapse-item name="1"> -->

              <!-- <view slot="title">
                                        <view class="demMoneyTitle">优惠金额</view>
                                    </view>
                                    <view slot="value">
                                        <view class="demMoneyVal">
                                            -￥
                                            <text class="tc">{{ det.totalDiscountBalance }}</text>
                                        </view>
                                    </view> -->

              <!-- </van-collapse-item>
                            </van-collapse> -->
              <!-- <orderCollapse>
                <orderCollapseItem
                  title="优惠详情"
                  title-border="none"
                  :value="det.totalDiscountBalance"
                >
                
                </orderCollapseItem>
              </orderCollapse> -->

              <view v-if="showShrink">
                <template
                  v-if="
                    det.memberDiscountBalance > 0 ||
                    det.discountBalance > 0 ||
                    det.cashCouponBalance > 0 ||
                    det.groupDiscountBalance > 0
                  "
                >
                  <view class="demMoneyList">
                    <view
                      class="demMoneyTitle"
                      v-if="
                        det.memberDiscountBalance > 0 ||
                        det.discountBalance > 0 ||
                        det.cashCouponBalance > 0
                      "
                    >
                      优惠详情
                    </view>
                  </view>
                  <view class="content">
                    <view class="demMoneyMore">
                      <view
                        class="MoneyMoreList"
                        v-if="det.memberDiscountBalance > 0"
                      >
                        <view>{{
                          det.payAccountStr == "个人"
                            ? "会员折扣(个人会员)"
                            : "会员折扣(车队会员)"
                        }}</view>
                        <view class="money">
                          -￥
                          <text class="tc1">{{
                            det.memberDiscountBalance
                          }}</text>
                        </view>
                      </view>
                      <!-- <view class="MoneyMoreList" v-if="det.ruleType != '1' && det.discountBalance > 0">
                        <view>优惠活动({{
                          det.ruleType == "2" ? "累计优惠" : "站点优惠"
                        }})</view>
                        <view class="money">
                          -￥
                          <text class="tc1">{{ det.discountBalance }}</text>
                        </view>
                      </view> -->

                      <!-- 831优惠展示 -->
                      <!-- 原站点优惠改为电站促销, 新增集团折扣 -->
                      <view
                        class="MoneyMoreList"
                        v-if="det.discountBalance > 0"
                      >
                        <view>电站促销</view>
                        <view class="money">
                          -￥
                          <text class="tc1">{{ det.discountBalance }}</text>
                        </view>
                      </view>

                      <view
                        class="MoneyMoreList"
                        v-if="det.groupDiscountBalance > 0"
                      >
                        <view>集团折扣</view>
                        <view class="money">
                          -￥
                          <text class="tc1">{{
                            det.groupDiscountBalance
                          }}</text>
                        </view>
                      </view>

                      <view
                        class="MoneyMoreList"
                        v-if="det.cashCouponBalance > 0"
                      >
                        <view>{{ det.couponTypeStr }}</view>
                        <view class="money">
                          -￥
                          <text class="tc1">{{ det.cashCouponBalance }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </template>
                <view class="demMoneyList">
                  <view class="demMoneyTitle"> 费用详情 </view>
                </view>
                <view class="content">
                  <view class="demMoneyMore">
                    <view class="MoneyMoreList2">
                      <!-- 添加微信支付分判断状态 -->
                      <view v-if="det.wxppOrder">预付金额（微信支付分)</view>
                      <view v-else
                        >{{
                          det.payAccountStr == "个人"
                            ? det.disposableOrder
                              ? "预付金额（充完即退)"
                              : "预付金额（个人钱包)"
                            : "预付金额（车队钱包)"
                        }}
                      </view>
                      <view class="money">
                        ￥
                        <text class="tc1">{{
                          det.preFrozenAmount ? det.preFrozenAmount : "0"
                        }}</text>
                      </view>
                    </view>
                    <view class="totalDetailed">{{ det.createTime }}</view>
                    <!-- 添加微信支付分判断状态不显示结算退回 -->
                    <template v-if="!det.wxppOrder">
                      <block v-if="det.disposableOrder">
                        <block v-if="det.refundObj">
                          <view class="MoneyMoreList2">
                            <view>结算退回（充完即退)</view>
                            <view class="money">
                              -￥
                              <text class="tc1">{{
                                det.refundObj
                                  ? (det.refundObj.money / 100).toFixed(2)
                                  : "0"
                              }}</text>
                            </view>
                          </view>
                          <view class="totalDetailed">{{
                            det.refundObj ? det.refundObj.realTime : "-"
                          }}</view>
                        </block>
                      </block>
                      <block v-else-if="det.payAccountStr == '个人'">
                        <!-- 只有个人身份显示结算退回，其他身份不显示 -->
                        <view class="MoneyMoreList2">
                          <view>{{
                            det.payAccountStr == "个人"
                              ? "结算退回（个人钱包)"
                              : "结算退回（车队钱包)"
                          }}</view>
                          <view class="money">
                            ￥
                            <text class="tc1">{{
                              det.backAmountCalculate
                                ? det.backAmountCalculate
                                : "0"
                            }}</text>
                          </view>
                        </view>
                        <view class="totalDetailed">{{
                          det.refundObj ? det.refundObj.realTime : "-"
                        }}</view>
                      </block>
                      <block v-else-if="det.payAccountStr == '个人'">
                        <!-- 只有个人身份显示结算退回，其他身份不显示 -->
                        <view class="MoneyMoreList2">
                          <view>{{
                            det.payAccountStr == "个人"
                              ? "结算退回（个人钱包)"
                              : "结算退回（车队钱包)"
                          }}</view>
                          <view class="money">
                            ￥
                            <text class="tc1">{{
                              det.backAmountCalculate
                                ? det.backAmountCalculate
                                : "0"
                            }}</text>
                          </view>
                        </view>
                        <view class="totalDetailed">{{ det.updateTime }}</view>
                      </block>
                    </template>
                    <block
                      v-if="det.disposableOrder && det.walletPayObj.length != 0"
                    >
                      <block
                        v-for="(item, index) in det.walletPayObj"
                        :key="index"
                      >
                        <view class="MoneyMoreList2">
                          <view>超出金额(个人钱包)</view>
                          <view class="money">
                            ￥
                            <text class="tc1">{{
                              (item.money / 100).toFixed(2)
                            }}</text>
                          </view>
                        </view>
                        <view class="totalDetailed">{{ item.realTime }}</view>
                      </block>
                    </block>
                    <block v-if="det.disposableOrder && det.wechatPayObj">
                      <view class="MoneyMoreList2">
                        <!-- #ifdef MP-ALIPAY -->
                        <view>超出金额(支付宝支付)</view>
                        <!-- #endif -->
                        <!-- #ifndef MP-ALIPAY -->
                        <view>超出金额(微信支付)</view>
                        <!-- #endif -->
                        <view class="money">
                          ￥
                          <text class="tc1">{{
                            det.wechatPayObj
                              ? (det.wechatPayObj.money / 100).toFixed(2)
                              : "0"
                          }}</text>
                        </view>
                      </view>
                      <view class="totalDetailed">{{
                        det.wechatPayObj ? det.wechatPayObj.realTime : "-"
                      }}</view>
                    </block>
                  </view>
                </view>

                <view class="demMoneyList" v-if="orderStatus == 1">
                  <view class="demMoneyTitle">退款金额</view>
                  <view class="totalCon">
                    <text class="demMoneyVal">
                      ￥
                      <text class="tc">{{
                        det.refundCoupon ? det.refundCoupon : 0
                      }}</text>
                    </text>
                  </view>
                </view>
              </view>
            </view>

            <view class="shrink" @tap="showShrinkButton"
              >{{ showShrink ? "收起费用明细" : "展开费用明细" }}>
              <!-- <image
                :src="
                  showShrink
                    ? sellerNo == 'jw'
                      ? 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/orderUpper-blue.png'
                      : 'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderUpper.png'
                    : sellerNo == 'jw'
                    ? 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/orderLower-blue.png'
                    : 'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderLower.png'
                "
                class="turn"
              ></image> -->
							<view :class="showShrink ? 'sanjiao-icon' : 'sanjiao-icon-up'"></view>
              <!--  <van-radio slot="right-icon" checked-color="#1487FA" :name="item.payType" /> -->
            </view>
          </view>

          <!-- 订单信息 -->
          <view class="infoCon">
            <view class="demMoneyCon">
              <view class="demMoneyList">
                <view class="demMoneyTitle">订单编号</view>
                <view class="totalCon">
                  <text class="order">{{ det.busShowNo }}</text>
                  <text
                    class="copyButton"
                    @tap="copyOrder"
                    :data-busId="det.busShowNo"
                    >复制</text
                  >
                </view>
              </view>
              <view class="infoList">
                <view class="infoListTitle">充电站点</view>
                <view class="infoListVal">{{
                  det.stationName ? det.stationName : "--"
                }}</view>
              </view>
              <view class="infoList">
                <view class="infoListTitle">充电桩枪</view>
                <view class="infoListVal"
                  >{{ det.pileName ? det.pileName : "--"
                  }}{{ det.gunName ? "-" + det.gunName : "" }}</view
                >
                <!-- {{ det.gunName ? "-" + det.gunName : "" }} -->
              </view>
              <view class="infoList">
                <view class="infoListTitle">电桩编号</view>
                <view class="infoListVal">{{ det.pileNumber }}</view>
                <!-- -{{det.gunNumber}} -->
              </view>
            </view>
          </view>

          <view
            class="placeholPileInfo"
            v-if="det.stationOccupy == 1 && det.occupyBill"
          >
            <view class="head flex-row-between">
              <view class="title">占位信息</view>
              <!-- <view class="status">待支付</view> -->
              <view class="status" v-if="det.occupyBill.billStatus == 11"
                >待支付</view
              >
              <view class="status1" v-if="det.occupyBill.billStatus == 14"
                >已支付</view
              >
              <view class="status2" v-if="det.occupyBill.billStatus == 18"
                >已退款</view
              >
            </view>
            <view class="center flex-row-between">
              <view class="center-item flex-column-center">
                <view class="minute"
                  >{{ det.occupyBill.duration }}<text>分钟</text></view
                >
                <view class="desc">总占位时长</view>
              </view>
              <view class="center-item flex-column-center">
                <view class="minute"
                  >{{ det.occupyBill.actualDuration }}<text>分钟</text></view
                >
                <view class="desc">超时占位时长</view>
              </view>
              <view class="center-item flex-column-center">
                <view class="minute"
                  >{{ det.occupyBill.busBalance | regFenToYuan
                  }}<text>元</text></view
                >
                <view class="desc">超时占位费用</view>
              </view>
            </view>
            <view class="flex-row-end">
              <view
                class="p-btn flex-row-center"
                style="margin-right: 10rpx"
                @click="toPlaceholderOrderDetail(det.occupyBill.id)"
                >查看详情</view
              >
            </view>
          </view>
          <view class="infoCon">
            <view class="infoTop">
              <view class="gunName">充电信息</view>
              <view>
                <view class="status" v-if="det.chargeType == 'man'">慢充</view>
                <view class="status" v-if="det.chargeType == 'kuai'">快充</view>
                <view class="status" v-if="det.chargeType == 'overTake'"
                  >超充</view
                >
                <view class="status">{{
                  det.pileCurrentMode == 1
                    ? "直流"
                    : det.pileCurrentMode == 2
                    ? "交流"
                    : det.pileCurrentMode == 3
                    ? "交直流一体"
                    : det.pileCurrentMode == 4
                    ? "无线设备"
                    : "其他"
                }}</view>
              </view>
            </view>
            <view class="infoTimeline">
              <view class="infoTimeCon">
                <view class="infoTimeData">{{ det.timeS[0] }}</view>
                <view>
                  <text class="infoTime">{{ det.timeS[1] }}</text>
                  <!-- <text class="infoTimeData">起</text> -->
                </view>
              </view>
              <view>
                <view class="processCon">
                  {{ det.difference }}
                </view>
                <view class="processReason">
                  <!-- {{ det.endReasonStr ? det.endReasonStr : "" }} -->
                  充电时长
                </view>
              </view>
              <view class="infoTimeCon">
                <view class="infoTimeData">{{ det.timeE[0] }}</view>
                <view>
                  <text class="infoTime">{{ det.timeE[1] }}</text>
                  <!-- <text class="infoTimeData">止</text> -->
                </view>
              </view>
            </view>

            <view class="OrderReason">
              <image
                src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderTip.png"
                class="turn"
              ></image
              >{{ det.endReasonStr ? det.endReasonStr : "暂无停止充电原因" }}
            </view>

            <view v-if="showInfo">
              <view class="orderBottom"></view>
              <view class="infoList">
                <view class="infoListTitle">充电车辆</view>
                <view class="infoListVal">{{
                  det.plateNo ? det.plateNo : "--"
                }}</view>
              </view>
              <view class="infoList">
                <view class="infoListTitle">已充电量</view>
                <view class="infoListVal">{{ det.sumPower }}度</view>
              </view>
              <view class="infoList" v-if="det.terminalType != 2">
                <view class="infoListTitle">结束SOC</view>
                <view class="infoListVal"
                  >{{ det.endSoc ? det.endSoc : "0" }}%</view
                >
              </view>
            </view>

            <view class="shrink" @tap="InfoShrinkButton"
              >{{ showInfo ? "收起充电信息" : "展开充电信息" }}
              <!-- <image
                :src="
                  showInfo
                    ? sellerNo == 'jw'
                      ? 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/orderUpper-blue.png'
                      : 'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderUpper.png'
                    : sellerNo == 'jw'
                    ? 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/orderLower-blue.png'
                    : 'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderLower.png'
                "
                class="turn"
              ></image> -->
							<view :class="showInfo ? 'sanjiao-icon' : 'sanjiao-icon-up'"></view>
              <!--  <van-radio slot="right-icon" checked-color="#1487FA" :name="item.payType" /> -->
            </view>
          </view>

          <view class="orderClothes">
            如有疑问请联系<text class="orderClothesText" @tap="call">客服</text>
          </view>

          <!-- <view class="costCon">
            <view class="costTop">
              <view class="costName">费用详情</view>
            </view>
            <view> -->
          <!-- <uni-steps :options="steps" direction="column" :active="2"></uni-steps> -->
          <!-- <orderSteps
                :options="steps"
                direction="column"
                :active="2"
              ></orderSteps> -->
          <!-- <uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps> -->
          <!-- <van-steps :steps="steps" :active="active" direction="vertical" active-color="#1487FA" desc-class="costDet"></van-steps> -->
          <!-- </view>
          </view> -->

          <view class="parkingRate" @tap="clickExplain" v-if="orderStatus == 2">
            <image
              class="img"
              src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/infor.png"
            ></image>
            支付说明
          </view>
        </view>
      </view>
    </view>
    <!-- 支付说明 -->
    <view v-if="orderStatus == 2">
      <!-- <van-transition :show="explain" custom-class="block" name="slide-up"> -->
      <view class="explainTipsCon" v-if="explain">
        <view class="explainTipsImg">
          <image
            src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/close.png"
            @tap="clickExplain"
          />
        </view>
        <view class="explainTipsText"
          >1、支付方式为个人账户/车队账户的，充值账户后系统将从目标账户中自动扣款。</view
        >
        <view class="explainTipsText"
          >2、支付方式为微信支付分的，系统将从目标渠道自动扣款。</view
        >
      </view>
      <!-- </van-transition> -->

      <view class="paymentCon">
        <view @tap="goPay" :data-busId="det.busId">去支付</view>
      </view>
    </view>

    <view
      class="refundTipsCon"
      v-if="showRefundTips && orderStatus == 1"
      @tap="showRefundTipsFun"
    >
      <image
        src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/refundClose.png"
      />
      退款成功，已退{{ det.refundCoupon ? det.refundCoupon : 0 }}元，已关闭
    </view>

    <view
      class="refundCon"
      v-if="showPaidTips && (det.billStatus == 13 || det.billStatus == 12)"
      @tap="showPaidTipsFun"
    >
      <image
        src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/refundClose.png"
      />
      待支付{{ (det.arrears / 100).toFixed(2) }}元，已支付{{
        det.actualBalance
      }}
    </view>

    <!-- 充完即退-欠款订单 -->
    <view
      v-if="
        (det.billStatus == 13 || det.billStatus == 12) && det.disposableOrder
      "
    >
      <view class="paymentCon">
        <view @tap="unifiedOrders">立即支付</view>
      </view>
    </view>
    <view class="order_msg">
      <view class="order_btn" @tap="orderTop(det)" :data-stationId="det.stationId">
        <!-- <text v-if="det.commentStatus == 0">评论</text>
        <text v-if="det.commentStatus == 1">查看评论</text> -->
        <text>再次充电</text>
      </view>
    </view>

    <uni-popup ref="showCustomerPup" type="dialog">
      <uni-popup-dialog
        type="info"
        cancelText="取消"
        confirmText="呼叫"
        title="温馨提示"
        @confirm="callCustomer"
        @close="onCloseCustomer"
      >
        <view>
          <view class="info">
            <view class="infoTitle">联系客服：</view
            ><text class="infoValue">{{ serviceInfo.customerTelephone }}</text>
          </view>
          <view class="info">
            <view class="infoTitle">工作时间：</view
            >{{ serviceInfo.customerServiceTime }}
          </view>
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
"use strict";
import capsule from "../../../components/nav/nav";
import navLod from "../../../components/navLod/navLod";
import orderSteps from "orderSub/components/orderSteps/orderSteps";
import orderCollapseItem from "orderSub/components/orderCollapse/components/uni-collapse-item/uni-collapse-item.vue";
import orderCollapse from "orderSub/components/orderCollapse/components/uni-collapse/uni-collapse.vue";
// import vanCollapse from '@vant/weapp/collapse/index';
// import vanCollapseItem from '@vant/weapp/collapse-item/index';
// import vanSteps from '@vant/weapp/steps/index';
// import vanTransition from '@vant/weapp/transition/index';

// exports.__esModule = true; // orderSub/pages/orderDetails/orderDetails.ts

var https_1 = require("./../../../api/https.js");
var app = getApp();
var util_1 = require("./../../../utils/util.js");
var Interval = null;
export default {
  components: {
    capsule,
    navLod,
    orderSteps,
    orderCollapseItem,
    orderCollapse,
    // vanCollapse,
    // vanCollapseItem,
    // vanSteps,
    // vanTransition
  },
  data() {
    return {
      marketingSwitch: app.globalData.marketingSwitch,
      sellerNo: app.globalData.sellerNo,
      unifiedOrderStstus: false,
      getRechargeResultNum: 1,
      explain: false,
      showRefundTips: true,
      showPaidTips: true,
      orderStatus: 3,

      det: {
        stationName: false,
        pileNumber: false,
        gunName: false,
        billTypeStr: "",
        busBalance: "",
        powerBalance: "",
        serviceBalance: "",
        totalDiscountBalance: "",
        payAccountStr: "",
        memberDiscountBalance: "",
        ruleType: "",
        discountBalance: "",
        deductibleBalance: "",
        cashCouponBalance: 0,
        couponTypeStr: "",
        billStatus: 0,
        billPayLog: [],
        actualBalance: "",
        memberType: 0,
        refundCoupon: false,
        busId: "",
        isSuper: false,
        chargeType: "",
        timeS: "",
        difference: "",
        endReasonStr: false,
        timeE: "",
        plateNo: false,
        sumPower: "",
        endSoc: false,
      },

      activeNames: [],
      active: 2,
      steps: [],
      orderNo: "",
      guns: [
        {
          value: 0,
          name: "A",
        },
        {
          value: 1,
          name: "B",
        },
        {
          value: 2,
          name: "C",
        },
        {
          value: 3,
          name: "D",
        },
        {
          value: 4,
          name: "E",
        },
        {
          value: 5,
          name: "F",
        },
        {
          value: 6,
          name: "G",
        },
        {
          value: 7,
          name: "H",
        },
        {
          value: 8,
          name: "I",
        },
        {
          value: 9,
          name: "J",
        },
        {
          value: 10,
          name: "K",
        },
        {
          value: 11,
          name: "L",
        },
        {
          value: 12,
          name: "M",
        },
        {
          value: 13,
          name: "N",
        },
        {
          value: 14,
          name: "O",
        },
        {
          value: 15,
          name: "P",
        },
        {
          value: 16,
          name: "Q",
        },
        {
          value: 17,
          name: "R",
        },
        {
          value: 18,
          name: "S",
        },
        {
          value: 19,
          name: "T",
        },
        {
          value: 20,
          name: "U",
        },
        {
          value: 21,
          name: "V",
        },
        {
          value: 22,
          name: "W",
        },
        {
          value: 23,
          name: "X",
        },
        {
          value: 24,
          name: "Y",
        },
        {
          value: 25,
          name: "Z",
        },
      ],

      showCustom: "",
      widnowH: uni.getSystemInfoSync().screenHeight,
      bar_Height: uni.getSystemInfoSync().statusBarHeight,

      serviceInfo: {
        customerTelephone: "",
        customerServiceTime: "",
      },

      showShrink: false,
      showInfo: false,
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 1:进行中 2：待支付 3：已完成 4：已关闭
    if (options.type == 1) {
    } else if (options.type == 2) {
      this.orderStatus = 2;
    } else if (options.type == 3) {
      this.orderStatus = 3;
    } else if (options.type == 4) {
      this.orderStatus = 1;
    }

    this.getDetails(options.orderId);
    this.getRefundAmount();

    this.orderIds = options.orderId;
  },
  onShow: function () {
    this.getDetails(this.orderIds);
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  onPageScroll: function (e) {
    let height =
      this.widnowH <= 568 ? this.bar_Height + 40 : this.bar_Height + 45;
    if (e.scrollTop > height) {
      this.setData({
        showCustom: true,
      });
    } else {
      this.setData({
        showCustom: false,
      });
    }
  },
  methods: {
    toPlaceholderOrderDetail(id) {
      uni.navigateTo({
        url:
          "/orderSub/pages/placeholderOrderDetail/placeholderOrderDetail?id=" +
          id,
      });
    },
    //去评论
    orderTop: function ({terminalType,stationId}) {
      // console.log(e, "去评论....");
      // uni.navigateTo({
      //   url: `../orderMsg/orderMsg?busId=${e.currentTarget.dataset.busid}&id=${e.currentTarget.dataset.id}&commentstatus=${e.currentTarget.dataset.commentstatus}`,
      // });
      if(terminalType ===2) {
        uni.navigateTo({
							url: '/homeSub/pages/eBikeSiteDetail/eBikeSiteDetail?stationId=' + stationId
						});
      } else {
        uni.navigateTo({
          url:
            "/homeSub/pages/siteDetail/siteDetail?stationId=" +
            stationId,
        });
      }

    },
    //去支付
    goPay: function (e) {
      if (!this.marketingSwitch) {
        uni.navigateTo({
          url:
            "../orderSettlement/orderSettlement?busId=" +
            e.currentTarget.dataset.busid,
        });
      } else {
        uni.navigateTo({
          url:
            "../orderSettlementYxhk/orderSettlement?busId=" +
            e.currentTarget.dataset.busid,
        });
      }
      // uni.navigateTo({
      //   url:
      //     "../orderSettlement/orderSettlement?busId=" +
      //     e.currentTarget.dataset.busid,
      // });
    },
    //立即支付
    unifiedOrders: function (e) {
      var that = this;
      if (!that.unifiedOrderStstus) {
        that.unifiedOrderStstus = true;
        uni.showLoading({
          title: "支付中...",
          mask: true,
        });
        let type = "JSAPI";
		let reqForm = {
			openId: uni.getStorageSync("openId"),
			totalFee: this.det.arrears,
			tradeType: type, // 交易类型：JSAPI -JSAPI支付 NATIVE -Native支付 APP -APP支付
			billId: that.orderIds,
		}
		// #ifdef MP-ALIPAY
		reqForm.payType = 2
		// #endif
		
        https_1
          .unifiedOrdersExceedMoney(reqForm)
          .then(function (res) {
            if (res.code == 0) {
              //微信
              var getpar = {
                timeStamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr,
                package: res.data.package,
                paySign: res.data.sign,
                orderNo: res.data.orderNo,
              };
              that.orderNo = res.data.orderNo;
              that.goDisposablePay(getpar);
            }
            uni.hideLoading();
          })
          ["catch"](function (res) {
            uni.hideLoading();
            uni.showModal({
              title: "支付失败",
              content: res.msg || "服务异常",
              showCancel: false,
            });
          });
      }
    },
    //调起支付
    goDisposablePay: function (data) {
      var that = this;
      uni.requestPayment({
        timeStamp: data.timeStamp + "",
        nonceStr: data.nonceStr,
        package: data.package,
        signType: "MD5",
        paySign: data.paySign,
        success: function () {
          that.getRechargeResult();
          that.unifiedOrderStstus = false;
        },
        fail: function () {
          that.cancelCharge();
          that.unifiedOrderStstus = false;
        },
      });
    },
    //取消充值 -- 支付前
    cancelCharge: function () {
		let reqForm = {
			totalFee: this.det.arrears,
			tradeType: "APP",
			orderNo: this.orderNo,
			cancelRecharge: 2,
			billId: this.orderIds,
		}
		// #ifdef MP-ALIPAY
		reqForm.payType = 2
		// #endif
      https_1.unifiedOrdersExceedMoney(reqForm)
        .then((res) => {
          if (res.code == 0) {
            uni.showModal({
              title: "消息提示",
              content: "已取消支付",
              showCancel: false,
            });
          }
        });
    },
    //启动充电-充完即退-微信取消充值 -- 支付后
    disposableCancelRecharge: function () {
      var that = this;
	  let reqForm = {
	  	orderNo: this.orderNo
	  }
	  // #ifdef MP-ALIPAY
	  reqForm.payType = 2
	  reqForm.outTradeNo = that.outTradeNo
	  // #endif
      https_1
        .disposableCancelRecharge(reqForm)
        .then(function () {
          that.getRechargeResultNum = 1;
        });
    },
    //查询支付结果
    getRechargeResult: function () {
      var that = this;
      uni.showLoading({ title: "支付中..", mask: true });
      this.disposableOrderResultQuery();
      this.Interval = setInterval(function () {
        if (that.getRechargeResultNum > 10) {
          uni.hideLoading();
          clearInterval(that.Interval);
          that.disposableCancelRecharge();
        } else {
          that.disposableOrderResultQuery();
        }
      }, 3000);
    },
    //启动充电-充完即退-微信查询支付结果
    disposableOrderResultQuery: function () {
      var that = this;
      var num = this.getRechargeResultNum + 1;
      this.getRechargeResultNum = num;
	  let reqForm = {
	  	orderNo: this.orderNo,
	  }
	  // #ifdef MP-ALIPAY
	  reqForm.payType = 2
	  // #endif
      https_1
        .disposableOrderResultQuery(reqForm)
        .then(function (res) {
          if (res.code === 0) {
            uni.hideLoading();
            clearInterval(that.Interval);
            that.getRechargeResultNum = 1;
            that.queryBillInfo();
          }
        });
    },
    queryBillInfo() {
      var that = this;
      https_1
        .queryBillInfo({
          billId: this.orderIds,
        })
        .then(function (res) {
          if (res.data) {
            that.orderStatus = 3;
            uni.showModal({
              title: "消息提示",
              content: "支付成功",
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  // uni.redirectTo({
                  // 	url:'../order/order?orderTypeIndex=0'
                  // })
                }
              },
            });
            that.getDetails(that.orderIds);
          }
        });
    },

    // 获取订单详情
    getDetails: function (id) {
      console.log(id, "订单id");
      var that = this;
      uni.showLoading({
        title: "加载中",
      });
      https_1
        .myBillDetails({
          id: id,
        })
        .then(function (res) {
          if (res.code == 0) {
            uni.hideLoading();

            res.data.difference = that.getDateDiff(
              res.data.timeS,
              res.data.timeE
            );
            res.data.timeS = res.data.timeS
              ? res.data.timeS.split(" ")
              : res.data.timeS;
            res.data.timeE = res.data.timeE
              ? res.data.timeE.split(" ")
              : res.data.timeE;

            //这两个有可能是null情况,直接去取js会报错;
            if (res.data.timeS) {
              res.data.timeS[0] =
                res.data.timeS[0].split("-")[1] +
                "月" +
                res.data.timeS[0].split("-")[2] +
                "日";
            }
            if (res.data.timeE) {
              res.data.timeE[0] =
                res.data.timeE[0].split("-")[1] +
                "月" +
                res.data.timeE[0].split("-")[2] +
                "日";
            }

            // res.data.timeS[0] = res.data.timeS[0].split("-")[1]+'月'+res.data.timeS[0].split("-")[2]+'日';
            // res.data.timeE[0] = res.data.timeE[0].split("-")[1]+'月'+res.data.timeE[0].split("-")[2]+'日';

            res.data.sumPower = (res.data.sumPower / 1000).toFixed(2); //已充电量

            res.data.arrears = res.data.arrears; //待支付
            res.data.actualBalance = that.regFenToYuan(res.data.actualBalance); //实收

            res.data.busBalance = that.regFenToYuan(res.data.busBalance); //订单金额

            res.data.powerBalance = that.regFenToYuan(res.data.powerBalance); //未折扣的电费

            res.data.serviceBalance = that.regFenToYuan(
              res.data.serviceBalance
            ); //未折扣的服务费

            res.data.totalDiscountBalance = that.regFenToYuan(
              res.data.totalDiscountBalance
            ); //优惠金额

            res.data.stationBalance = that.regFenToYuan(
              res.data.stationBalance
            ); //站点优惠

            res.data.memberDiscountBalance = that.regFenToYuan(
              res.data.memberDiscountBalance
            ); //会员折扣

            res.data.contractBalance = that.regFenToYuan(
              res.data.contractBalance
            ); //合约优惠的金额

            res.data.deductibleBalance = that.regFenToYuan(
              res.data.deductibleBalance
            ); //奖励金抵扣金额

            res.data.powerCoupon = that.regFenToYuan(res.data.powerCoupon); //电费券抵扣的金额

            res.data.refundCoupon = that.regFenToYuan(res.data.refundCoupon); //退款金额

            res.data.cashCouponBalance = that.regFenToYuan(
              res.data.cashCouponBalance
            ); //卷

            res.data.discountBalance = that.regFenToYuan(
              res.data.discountBalance
            ); //优惠活动金额

            // 集团折扣
            res.data.groupDiscountBalance = that.regFenToYuan(
              res.data.groupDiscountBalance
            );

            if (!res.data.gunName) {
              res.data.gunName = that.guns[res.data.gunNumber].name;
            }
            console.log("actualBalance", res.data.actualBalance);

            if (res.data.billStatus == 13 || res.data.billPayLog) {
              // res.data.bePaid = res.data.actualBalance;
              // 设置待支付，
              res.data.unpaid = 0;
              // 设置已支付
              res.data.havePaid = 0;
              res.data.paidAmount;
              res.data.billPayLog.map(function (item, index) {
                if (item.paidAmount) {
                  item.paidAmount = that.regFenToYuan(item.paidAmount);
                }
                if (item.debt) {
                  item.debt = that.regFenToYuan(item.debt);
                }
                // res.data.bePaid = (res.data.bePaid - item.paidAmount).toFixed(
                //   4
                // );
                return item;
              });
              // res.data.paid = (
              //   res.data.actualBalance - res.data.bePaid
              // ).toFixed(4);
            }

            var str_1 = [];
            res.data.billTimeDetailList.map(function (item) {
              str_1.push({
                title:
                  util_1.formatDateTime(item.startTime).split(" ")[1] +
                  "-" +
                  util_1.formatDateTime(item.endTime).split(" ")[1],
                desc:
                  "电费：¥" +
                  that.regFenToYuan(item.powerBlance) +
                  "(¥" +
                  that.regFenToYuan(item.powerPrice, true) +
                  "/度)",
                desc2:
                  "服务费：¥" +
                  that.regFenToYuan(item.seviceBlance) +
                  "(¥" +
                  that.regFenToYuan(item.servicePrice, true) +
                  "/度)",
                val: "充电" + (item.power / 1000).toFixed(3) + "度",
              });
            });
            console.log(res.data);

            (that.steps = str_1), (that.det = res.data);
          }
          console.log(
            `后端返回的应付金额是${res.data.actualBalance}订单总金额是${res.data.busBalance},优惠总金额是${res.data.totalDiscountBalance}抵扣总金额是${res.data.deductibleBalance}`
          );
          console.log("billPayLog", res.data.billPayLog);
          // 实付金额计算  实付金额=订单总金额-优惠金额-奖励金
          // res.data.actualBalanceCalculate = (res.data.busBalance - (res.data.totalDiscountBalance || 0) - (res.data.deductibleBalance || 0)).toFixed(2)

          console.log("电站促销字段==>", res.data.discountBalance);
          console.log("集团折扣字段==>", res.data.groupDiscountBalance);

          res.data.actualBalanceCalculate = res.data.actualBalance;
          // 结算退回计算 预付金额 - 实付金额
          res.data.backAmountCalculate = (
            res.data.preFrozenAmount -
            Number(res.data.actualBalanceCalculate || 0)
          ).toFixed(2);
          res.data.backAmountCalculate =
            res.data.backAmountCalculate < 0 ? 0 : res.data.backAmountCalculate;
          // 结算退回计算 待支付状态显示0
          if (
            res.data.billStatus == 13 ||
            res.data.billStatus == 12 ||
            res.data.billStatus == 11
          ) {
            res.data.backAmountCalculate = "0.00";
          }

          that.det = res.data;

          uni.hideLoading();
        });
    },

    //计算时间差
    getDateDiff: function (startTime, endTime) {
      //将日期字符串转换为时间戳
      var sTime = startTime ? Date.parse(startTime.replace(/-/g, "/")) : "--"; //开始时间

      var eTime = endTime ? Date.parse(endTime.replace(/-/g, "/")) : "--"; //结束时间
      //作为除数的数字

      var divNumSecond = 1000;
      var divNumMinute = 1000 * 60;
      var divNumHour = 1000 * 3600;
      var divNumDay = 1000 * 3600 * 24;
      var day = parseInt((eTime - sTime) / parseInt(divNumDay));
      var hour = parseInt(
        ((eTime - sTime) % parseInt(divNumDay)) / parseInt(divNumHour)
      );
      var minute = parseInt(
        parseInt(
          ((eTime - sTime) % parseInt(divNumDay)) % parseInt(divNumHour)
        ) / parseInt(divNumMinute)
      );
      var second =
        (parseInt(
          ((eTime - sTime) % parseInt(divNumDay)) % parseInt(divNumHour)
        ) %
          parseInt(divNumMinute)) /
        parseInt(divNumSecond);
      var time = day * 24 + hour;

      if (second < 10) {
        second = "0" + second;
      }

      if (minute < 10) {
        minute = "0" + minute;
      }

      if (time < 10) {
        time = "0" + time;
      }

      var str = time + ":" + minute + ":" + second;
      return str;
    },

    onChange: function (event) {
      this.activeNames = event.detail;
    },

    // 支付说明
    clickExplain: function () {
      this.explain = !this.explain;
    },

    // 退款提示框
    showRefundTipsFun: function () {
      this.showRefundTips = false;
    },

    showPaidTipsFun: function () {
      this.showPaidTips = false;
    },

    // 分转元
    regFenToYuan: function (fen, s) {
      var num = 0;

      if (!s) {
        num = (fen / 100).toFixed(2);
      } else {
        num = (fen / 10000).toFixed(2);
      }

      return num;
    },

    // 复制订单号
    copyOrder: function (e) {
      uni.setClipboardData({
        data: e.currentTarget.dataset.busid,
      });
    },

    //客服电话
    callCustomer: async function () {
      this.$refs.showCustomerPup.close();
      //#ifdef APP-PLUS
      let result = await this.$store.dispatch(
        "requestPermissions",
        "CALL_PHONE"
      );
      if (result !== 1) {
        return;
      } else {
        uni.makePhoneCall({
          phoneNumber: this.serviceInfo.customerTelephone,
        });
      }
      //#endif
      //#ifdef MP-WEIXIN
      uni.makePhoneCall({
        phoneNumber: this.serviceInfo.customerTelephone,
      });
      //#endif
    },
    call: function () {
      this.$refs.showCustomerPup.open();
    },

    onCloseCustomer: function () {
      this.$refs.showCustomerPup.close();
    },

    getRefundAmount: function () {
      var that = this;
      https_1.refundAmount().then(function (res) {
        if (res.code == 0) {
          that.setData({
            serviceInfo: res.data,
          });
        }
      });
    },

    showShrinkButton: function () {
      this.showShrink = !this.showShrink;
    },
    InfoShrinkButton: function () {
      this.showInfo = !this.showInfo;
    },
  },
};
</script>
<style lang="less">
@import "./orderDetails.less";
@import "../../../commin/flex.less";
/* orderSub/pages/orderDetails/orderDetails.wxss */

page {
  background-color: #f4f6f8;
  height: 100vh;
  padding-bottom: 40rpx;
}

.placeholPileInfo {
  background: linear-gradient(0deg, #ffffff, #f4f6f8);
  box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
  border: 2rpx solid #ffffff;
  margin: 16rpx 14rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  line-height: 1;
  padding: 40rpx 30rpx;

  .head {
    margin-bottom: 36rpx;

    .title {
      font-size: 32rpx;
      color: #303133;
    }

    .status {
      font-size: 28rpx;
      color: #fc724c;
    }

    .status1 {
      font-size: 28rpx;
      color: #6db12e;
    }

    .status2 {
      font-size: 28rpx;
      color: #606266;
    }
  }

  .center-item {
    .minute {
      font-size: 40rpx;
      font-weight: 700;
      color: #303133;
      margin-bottom: 27rpx;

      text {
        font-size: 28rpx;
        font-weight: normal;
      }
    }

    .desc {
      font-size: 28rpx;
      color: #606266;
      margin-bottom: 32rpx;
    }
  }

  .p-btn {
    width: 146rpx;
    height: 44rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 1rpx solid #6db12e;
    font-size: 26rpx;
    color: #6db12e;
  }
}

.header-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 556rpx;
}

.detCon {
  width: 100%;
  position: relative;
}

.detName {
  font-size: 34rpx;
  font-weight: bold;
  color: #18181a;
  margin: 15rpx 0 42rpx 32rpx;
}

.demarcation {
  margin: 0 10rpx;

  .demCon {
    margin: 10rpx 14rpx;
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 0rpx 0rpx 16rpx 16rpx;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;

    .demTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #dcdfe6;
      padding: 40rpx 33rpx 32rpx 33rpx;

      .gunName {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #18181a;
      }

      .status {
        height: 25rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: var(--textColor);
      }
    }

    .demCenter {
      position: relative;
      // height: 200rpx;
      text-align: center;

      .demNum {
        font-size: 64rpx;
        font-weight: bold;
        margin: 55rpx 0 16rpx 0;
      }

      .demTitle {
        color: #606266;
        font-size: 26rpx;
      }

      .symbol {
        font-size: 40rpx;
        color: #000000;
      }

      .demState {
        color: #606266;
        font-size: 28rpx;
        font-weight: 400;
        height: 50rpx;
        line-height: 50rpx;

        image {
          height: 31rpx;
          width: 31rpx;
          vertical-align: text-bottom;
          margin-left: 10rpx;
        }
      }
    }
  }

  .infoCon {
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border: 2rpx solid #ffffff;
    margin: 16rpx 14rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .demMoneyTitle {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #606266;
    }

    .demMoneyVal {
      font-size: 28rpx;
      font-weight: 500;
      color: #fc724c;
    }

    .demMoneyList {
      padding: 25rpx 31rpx 20rpx 31rpx;
      line-height: 34rpx;
      display: flex;
      justify-content: space-between;

      .totalCon {
        text-align: right;

        .totalDetailed {
          margin-top: 20rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #909399;
          line-height: 34rpx;
          opacity: 0.9;
        }

        .order {
          font-size: 30rpx;
          font-weight: 500;
          color: #303133;
        }

        .copyButton {
          font-size: 28rpx;
          font-weight: 400;
          color: var(--textColor);
          display: inline-block;
          border-left: 1px solid #909399;
          padding: 0 0 0 20rpx;
          margin-left: 20rpx;
        }
      }
    }

    .infoTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 39rpx 32rpx 32rpx 34rpx;

      .gunName {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #18181a;
      }

      .status {
        color: #db9132;
        text-align: center;
        line-height: 40rpx;
        // width: 76rpx;
        padding: 0 12rpx;
        height: 40rpx;
        background: rgba(233, 178, 108, 0.1608);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        opacity: 1;
        display: inline-block;
        font-size: 28rpx;
        font-family: PingFang SC;
        margin-left: 14rpx;

        // color: var(--textColor);
      }
    }

    .infoTimeline {
      text-align: center;
      display: flex;
      justify-content: space-between;
      padding: 42rpx 32rpx 0 32rpx;

      .infoTimeCon {
        display: inline-block;
        width: auto;
        text-align: left;
      }

      .infoTimeData {
        font-weight: 400;
        color: #909399;
        font-size: 26rpx;
        margin: 0 0 15rpx 0;
        text-align: center;
      }

      .infoTime {
        font-weight: bold;
        color: #303133;
        font-size: 34rpx;
        margin-top: 15rpx;
        margin-right: 10rpx;
      }

      .processCon {
        border: 1px solid var(--textColor);
        border-radius: 24px;
        width: 160rpx;
        display: inline-block;
        font-size: 28rpx;
        font-weight: 500;
        color: var(--textColor);
        // background: rgba(109, 177, 46, 0.102);
        position: relative;
        height: 48rpx;
        line-height: 48rpx;
        margin-top: 15rpx;

        &::after {
          content: "";
          border-top: 1px solid #909399;
          position: absolute;
          top: 1;
          width: 40rpx;
          height: 1rpx;
          left: -40rpx;
          top: 24rpx;
        }

        &::before {
          content: "";
          border-top: 1px solid #909399;
          position: absolute;
          top: 1;
          width: 40rpx;
          height: 1rpx;
          right: -40rpx;
          top: 24rpx;
        }
      }

      .processReason {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #606266;
        margin-top: 10rpx;
      }
    }

    .infoList {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 34rpx;

      .infoListTitle {
        width: 200rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #606266;
      }

      .infoListVal {
        word-break: break-all;
        font-size: 28rpx;
        font-weight: 500;
        color: #303133;
        text-align: right;
      }
    }
  }

  .costCon {
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border: 2rpx solid #ffffff;
    margin: 10rpx 10rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .van-steps {
      background: none;
    }

    .costTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #dcdfe6;
      padding: 40rpx 33rpx 32rpx 33rpx;

      .costName {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #18181a;
      }
    }

    .costDet {
      color: #606266;
      font-size: 26rpx;
      margin: 20rpx 20rpx;
    }
  }

  .demMoneyCon {
    > view {
      border: none !important;
      box-shadow: none;
    }

    > text {
      border: none !important;
      box-shadow: none;
    }

    padding: 10rpx 0 10rpx 0;

    .demMoneyTitle {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #606266;
    }

    .demMoneyVal {
      font-size: 28rpx;
      font-weight: 500;
      color: #fc724c;
    }

    .demMoneyList {
      padding: 25rpx 31rpx 20rpx 31rpx;
      line-height: 34rpx;
      display: flex;
      justify-content: space-between;

      .totalCon {
        text-align: right;

        .totalDetailed {
          margin-top: 20rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #909399;
          line-height: 34rpx;
          opacity: 0.9;
        }

        .order {
          font-size: 30rpx;
          font-weight: 500;
          color: #303133;
        }

        .copyButton {
          font-size: 28rpx;
          font-weight: 400;
          color: var(--textColor);
          display: inline-block;
          border-left: 1px solid #909399;
          padding: 0 0 0 20rpx;
          margin-left: 20rpx;
        }
      }
    }

    .demMoneyMore {
      background: #f5f7fa;
      padding: 40rpx 24rpx 10rpx 24rpx;
      margin: 0 32rpx 32rpx 32rpx;

      .MoneyMoreList {
        font-size: 26rpx;
        color: #303133;
        display: flex;
        justify-content: space-between;
        margin-bottom: 32rpx;

        .MoneyMoreVal {
          color: #606266;
        }
      }

      .MoneyMoreList2 {
        font-size: 26rpx;
        color: #303133;
        display: flex;
        justify-content: space-between;

        .MoneyMoreVal {
          color: #606266;
        }
      }

      .totalDetailed {
        text-align: right;
        margin: 9rpx 0 29rpx 0;
        font-size: 26rpx;
        font-weight: 400;
        color: #909399;
        line-height: 34rpx;
        opacity: 0.9;
      }
    }
  }

  .van-cell:after {
    display: none !important;
  }

  .van-collapse-item__content {
    padding-top: 0px;
  }
}

.refundTipsCon {
  width: 100%;
  background: #595c69;
  opacity: 0.6;
  height: 80rpx;
  line-height: 80rpx;
  color: #ffffff;
  position: fixed;
  bottom: 0;
  font-size: 28rpx;
  font-weight: 500;

  image {
    height: 32rpx;
    width: 32rpx;
    vertical-align: middle;
    margin: 0 20rpx;
  }
}

.refundCon {
  width: 100%;
  background: #595c69;
  opacity: 0.6;
  height: 80rpx;
  line-height: 80rpx;
  color: #ffffff;
  position: fixed;
  bottom: 130rpx;
  font-size: 28rpx;
  font-weight: 500;

  image {
    height: 32rpx;
    width: 32rpx;
    vertical-align: middle;
    margin: 0 20rpx;
  }
}

.explainTipsCon {
  z-index: 2;
  display: inline;
  width: 702rpx;
  background: #303133;
  opacity: 0.8;
  padding: 20rpx 0;
  color: #ffffff;
  position: fixed;
  bottom: 150rpx;
  font-size: 28rpx;
  font-weight: 500;
  margin: 0 24rpx;
  border-radius: 10rpx;

  .explainTipsImg {
    text-align: right;

    image {
      height: 32rpx;
      width: 32rpx;
      vertical-align: middle;
      margin: 0 20rpx;
    }
  }

  .explainTipsText {
    margin: 33rpx;
    font-size: 26rpx;
    letter-spacing: 2rpx;
    line-height: 42rpx;
  }
}

.parkingRate {
  color: #606266;
  font-size: 24rpx;
  padding: 5rpx 40rpx 22rpx 40rpx;

  .img {
    width: 25rpx;
    height: 25rpx;
    vertical-align: middle;
    margin-right: 15rpx;
  }
}

.paymentCon {
  height: 120rpx;
  line-height: 120rpx;
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  background: linear-gradient(0deg, #ffffff, #f4f6f8);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0px -25px 67px 0px rgba(177, 182, 190, 0.2);
  text-align: center;
  z-index: 999;

  view {
    height: 88rpx;
    background: var(--btnColor);
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    font-weight: bold;
    color: #ffffff;
    font-size: 30rpx;
    display: inline-block;
    width: 680rpx;
  }
}

.money {
  color: #606266;
  font-size: 26rpx;
  text-align: right;
  font-weight: 500;
}

.tc {
  font-size: 34rpx;
  font-weight: bold;
}

.tc1 {
  font-size: 28rpx;
  font-weight: bold;
}

.detTopCon {
  margin: 0rpx 32rpx;
  color: #ffffff;
  font-weight: 400;
  font-weight: 400;
}

.detTopName {
  font-size: 36rpx;
  padding-top: 64rpx;
}

.detTopText {
  font-size: 24rpx;
  margin: 24rpx 0 41rpx 0;
}

.shrink {
  font-size: 24rpx;
  font-weight: 400;
  color: var(--textColor);
  line-height: 34rpx;
  text-align: center;
  margin-bottom: 32rpx;

  .turn {
    width: 25rpx;
    height: 12rpx;
    margin-left: 16rpx;
  }

  .sanjiao-icon {
    width: 0;
    height: 0;
    border-top: 14rpx solid transparent; 
    border-right: 14rpx solid transparent;
    border-left: 14rpx solid transparent;
    border-bottom: 14rpx solid var(--btnColor);
    margin-top: -14rpx;
    margin-left: 12rpx;
  }

  .sanjiao-icon-up {
    width: 0;
    height: 0;
    border-bottom: 14rpx solid transparent; 
    border-right: 14rpx solid transparent;
    border-left: 14rpx solid transparent;
    border-top: 14rpx solid var(--btnColor);
    margin-top: 14rpx;
    margin-left: 12rpx;
  }
}

.OrderReason {
  margin: 42rpx 32rpx 0 32rpx;
  font-weight: 400;
  color: #fc724c;
  font-size: 24rpx;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  padding-bottom: 40rpx;

  .turn {
    width: 24rpx;
    height: 24rpx;
    margin-right: 8rpx;
    vertical-align: middle;
  }
}

.orderClothes {
  font-weight: 400;
  color: #606266;
  font-size: 24rpx;
  text-align: center;
  margin: 40rpx 0;

  .orderClothesText {
    color: var(--textColor);
  }
}

.orderBottom {
  border-top: 1rpx solid #dcdfe6;
  margin: 0rpx 32rpx;
}
</style>
